<template>
  <div>
    <div>
      <span class="title">开店流程</span>
      <el-steps :active="2" align-center>
        <el-step title="提交资料" description="填写店铺信息及经营资质信息"></el-step>
        <el-step title="资料审核" description="等待资料审核（1-3个工作日）"></el-step>
        <el-step title="开门营业" description="完成开店前准备任务后就可以开门营业啦"></el-step>
      </el-steps>
    </div>

    <el-button size="medium" style="font-size: 50px" type="success" @click="() => {this.submitVisible=true}">我要开店</el-button>

    <div>
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>我的申请</span>
        </div>
        <!--<div v-for="item in myRest" class="text item">-->

            <span style="float: left;" v-text="myRest.restaurantName"></span>
            <!--价格:单价乘数量-->
            <el-tag style="float: right;" v-if="myRest.status===0" type="warning">审核中</el-tag>
            <el-tag style="float: right;" v-if="myRest.status===1" type="success">审核通过</el-tag>
            <el-tag style="float: right;" v-if="myRest.status===2" >开始营业</el-tag>
            <el-button v-if="myRest.status===1" type="success" @click="confirmOpen(myRest.id)">确认开店</el-button>

          <!--<el-divider></el-divider>-->
        <!--</div>-->
        <el-divider></el-divider>
        <div class="clearfix">
          <span>footer</span>
        </div>
      </el-card>
    </div>

    <!--开店要求-->
    <div class="el-footer">
      <span class="title">开店要求</span>
      <el-row>
        <el-col :span="8">
          <i class="el-icon-s-shop icon-warp"></i><br/>
          <span class="title-require">有实体门店</span>
        </el-col>
        <el-col :span="8">
          <i class="el-icon-s-claim icon-warp"></i><br/>
          <span class="title-require">有经营资格</span>
        </el-col>
        <el-col :span="8">
          <i class="el-icon-s-order icon-warp"></i><br/>
          <span class="title-require">品类范围</span>
        </el-col>
      </el-row>
    </div>

    <!--店铺加盟,填资料-->
    <el-dialog
      title="提交资料"
      :visible.sync="submitVisible"
      width="30%"
      :before-close="handleClose">

      <el-form label-position="left" label-width="100px" class="demo-ruleForm">

        <el-form-item label="店名">
          <el-input v-model="registerInfo.restaurantName" value=""></el-input>
        </el-form-item>
        <el-form-item label="描述">
          <el-input v-model="registerInfo.desc" value=""></el-input>
        </el-form-item>
        <el-form-item label="图片">
          <el-input v-model="registerInfo.restaurantImg" value=""></el-input>
        </el-form-item>
        <el-form-item label="地址">
          <el-input v-model="registerInfo.address" value=""></el-input>
        </el-form-item>
        <el-form-item label="餐厅电话">
          <el-input v-model="registerInfo.mobile" value=""></el-input>
        </el-form-item>
        <el-form-item label="餐盒费用">
          <el-input v-model="registerInfo.boxCost" value="0"></el-input>
        </el-form-item>
        <el-form-item label="餐厅资金">
          <el-input v-model="registerInfo.money" value="0.0"></el-input>
        </el-form-item>
        <el-form-item label="餐厅持有人">
          <el-input v-model="registerInfo.ownerName" value=""></el-input>
        </el-form-item>
        <el-form-item label="联系邮箱">
          <el-input v-model="registerInfo.email" value=""></el-input>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="submitForm">立即创建</el-button>
          <el-button @click="resetForm">重置</el-button>
        </el-form-item>
      </el-form>

    </el-dialog>

  </div>

</template>

<script>
    export default {
      name: "RegisterRestaurant",
      inject: ['reload'],
      data() {
        return {
          step: 1,  //0,1,2,3
          submitVisible: false,
          registerInfo: {
            id: null,
            restaurantName: '',
            desc: '',
            restaurantImg: '',
            address: '',
            mobile: '',
            money: 0,
            ownerName: '',
            email: '',
            boxCost: 0.0,
            createTime: null
          },
          // 我的店铺列表
          myRest: {}
        }
      },
      created() {
        this.$axios({
          method: "get",
          url: "/rest/myrest",
          params: {
            uid: this.$store.state.user.id
          }
        })
          .then(response => {
            if (response.data.success) {
              console.log(response.data.message);
              this.myRest=response.data.my_rest;
              // return response.data.my_rest_list;
            } else {
              console.log(response.data.message)
            }
          })
          .catch(error => console.log(error));
      },
      methods: {
        handleClose(done) {
          // this.$confirm('确认关闭？')
          //   .then(_ => {
          //     this.$emit("close-order");
          //     // done();
          //   })
          //   .catch(_ => {});
          this.submitVisible=false;
        },
        //提交资料信息
        submitForm() {
          console.log('submit apply!');
          console.log(new Date().getTime())
          this.$axios({
            method: "post",
            url: "/rest/register",
            data: {
              restaurantName: this.registerInfo.restaurantName,
              userId: this.$store.getters.uid,
              description: this.registerInfo.desc,
              restaurantImg: this.registerInfo.restaurantImg,
              address: this.registerInfo.address,
              mobile: this.registerInfo.mobile,
              money: this.registerInfo.money,
              ownerName: this.registerInfo.ownerName,
              email: this.registerInfo.email,
              boxCost: this.registerInfo.boxCost,
              createTime: new Date().getTime()
            }
          })
            .then(response => {
              if (response.data.success) {
                console.log(response.data.message);
                console.log("商家入盟成功,请确认开店营业!");
                this.reload();
              } else {
                console.log(response.data.message);
              }
            })
            .catch(error => console.log(error));
        },
        resetForm() {
          console.log('reset');

        },

        confirmOpen(id) {
          console.log("open this restaurant id= " + id);

          this.$axios({
            method: "get",
            url: "/rest/open",
            params: {
              id: id
            }
          })
            .then(response => {
              if (response.data.success) {
                this.reload();
              }
              console.log(response.data.message);
            })
            .catch(error => console.log(error))
        }
      }
    }
</script>

<style scoped>
  .title {
    font-size: 30px;
  }

  .title-require {
    font-size: 18px;
  }

  .icon-warp {
    font-size: 100px
  }

</style>
